<!--
 * @Description: 流程表单
 * @Author: DHL
 * @Date: 2022-08-04 15:56:35
 * @LastEditors: DHL
 * @LastEditTime: 2023-01-17 10:06:04
-->
<template>
  <div class="process-panel-tab__content">
    <el-form ref="dbFormRef" label-width="80px">
      <el-form-item label="表单标识">
        <el-input v-model="dbForm.formKey" clearable @change="handleChange()"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
  export default { name: 'PanelElementForm' }
</script>

<script setup lang="ts">
  import { useBpmnStore } from '../../store/bpmn'
  const bpmnStore = useBpmnStore()

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          dbForm.formKey = bpmnStore.activatedElement.businessObject.formKey
        })
      }
    },
    {
      immediate: true
    }
  )

  const dbForm = reactive({
    formKey: ''
  })

  function handleChange() {
    bpmnStore.updateProperties({ formKey: dbForm.formKey })
  }
</script>

<style scoped lang="scss"></style>
